<template>
  <div>
    <!-- 图片轮播组件 -->
    <el-carousel
      v-if="showCarousel"
      ref="carousel"
      :autoplay="carouselAutoplay"
      class="picture-banner-carousel"
      indicator-position="none"
      height="300px"
      @change="handleIndexChange"
      :key="carouselKey"
    >
      <el-carousel-item v-for="(item, index) in pictureList" :key="index">
        <!-- 图片展示区域 -->
        <el-image
          :src="item.meta"
          :alt="item.title"
          class="picture-banner-image"
          @click="handleClick(item, index)"
        />
        <!-- 图片标题 -->
        <div v-if="item.title" class="picture-banner-title">
          {{ item.title }}
        </div>
      </el-carousel-item>
    </el-carousel>

    <!-- 图片指示点（在外部显示） -->
    <div class="carousel-indicator">
      <span
        v-for="(item, index) in pictureList"
        :key="index"
        :class="['indicator-dot', { active: index === currentIndex }]"
      ></span>
    </div>

    <!-- 放大模式的展示区域 -->
    <div v-if="isShowMode" class="full-screen-overlay">
      <!-- 退出按钮 -->
      <el-button class="close-button" @click="closeOverlay" circle>
        <el-icon><Close /></el-icon>
      </el-button>

      <!-- 左侧切换按钮 -->
      <el-button v-if="currentIndex > 0" class="left-button" @click="prevPicture" circle>
        <el-icon><ArrowLeft /></el-icon>
      </el-button>

      <!-- 右侧切换按钮 -->
      <el-button
        v-if="currentIndex < pictureList.length - 1"
        class="right-button"
        @click="nextPicture"
        circle
      >
        <el-icon><ArrowRight /></el-icon>
      </el-button>

      <!-- 放大图片展示 -->
      <el-image :src="pictureList[currentIndex].meta" class="full-screen-image" fit="contain" />

      <!-- 图片指示点（在放大模式显示） -->
      <div class="indicator-container">
        <span
          v-for="(item, index) in pictureList"
          :key="index"
          :class="['indicator-dot', { active: index === currentIndex }]"
        ></span>
      </div>
    </div>
  </div>
</template>

<script>
import { ElIcon } from 'element-plus'
import { Close, ArrowLeft, ArrowRight } from '@element-plus/icons-vue'

export default {
  name: 'PictureBanner',
  components: {
    ElIcon,
    Close,
    ArrowLeft,
    ArrowRight
  },
  props: {
    mode: {
      type: String,
      required: true,
      validator: (value) => ['show', 'link'].includes(value), // 限定取值范围
      default: 'show' // 默认展示模式
    },
    pictureList: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  data() {
    return {
      isShowMode: false, // 控制是否进入放大模式
      currentIndex: 0, // 当前展示的图片索引
      carouselAutoplay: true, // 控制轮播的自动播放
      carouselKey: 0, // 用于强制重新渲染carousel组件
      showCarousel: true // 控制carousel是否显示
    }
  },
  methods: {
    handleClick(item, index) {
      // 暂停自动切换轮播
      this.carouselAutoplay = false
      this.showCarousel = false // 暂时隐藏
      this.$nextTick(() => {
        this.showCarousel = true // 重新显示以便使新设置生效
      })

      if (this.mode === 'show') {
        // 展示模式：进入放大模式
        this.isShowMode = true
        this.currentIndex = index
      } else if (this.mode === 'link' && item.url) {
        // 跳转模式：跳转到指定链接或路由
        if (/^(http|https):/.test(item.url)) {
          window.open(item.url, '_blank') // 外部链接
        } else {
          this.$router.push(item.url) // 内部路由跳转
        }
      }
    },
    closeOverlay() {
      // 退出放大模式
      this.isShowMode = false
      // 恢复自动轮播
      this.carouselAutoplay = true
      this.carouselKey += 1 // 通过更新key来强制重新渲染carousel组件
    },
    prevPicture() {
      // 上一张图片
      if (this.currentIndex > 0) {
        this.currentIndex--
      }
    },
    nextPicture() {
      // 下一张图片
      if (this.currentIndex < this.pictureList.length - 1) {
        this.currentIndex++
      }
    },
    handleIndexChange(index) {
      // 当 Carousel 切换时更新当前索引
      this.currentIndex = index
    }
  }
}
</script>

<style scoped>
.picture-banner-carousel {
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  position: relative;
}

.picture-banner-image {
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.picture-banner-image:hover {
  transform: scale(1.05); /* 鼠标悬停时放大效果 */
}

.picture-banner-title {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: white;
  font-size: 18px;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}

/* 外部显示的指示点 */
.carousel-indicator {
  position: absolute;
  bottom: 10px;
  right: 20px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.full-screen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7); /* 背景半透明 */
  backdrop-filter: blur(10px); /* 毛玻璃效果 */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999; /* 确保放大模式位于最前 */
}

.full-screen-image {
  max-width: 80%;
  max-height: 80%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.left-button,
.right-button,
.close-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.8);
  font-size: 24px; /* 确保按钮图标大小合适 */
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.left-button {
  left: 30px;
}

.right-button {
  right: 30px;
}

.close-button {
  top: 20px;
  right: 30px;
  background: rgba(255, 255, 255, 0.8);
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.indicator-container,
.carousel-indicator {
  position: absolute;
  bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.indicator-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  margin: 0 5px;
}

.indicator-dot.active {
  background: #ffffff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
}
</style>
